<template>
  <div class="dict-wrap">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="14">
        <div class="app-container">
          <dict-filter @search="search" @add="addDict" />
          <div>
            <el-table
              ref="table"
              :key="0"
              v-loading="loading"
              :data="list"
              border
              fit
              style="width: 100%;"
            >
              <el-table-column
                type="index"
                align="center"
              />
              <el-table-column
                prop="dictName"
                label="字典名称"
                align="center"
              />
              <el-table-column
                prop="dictType"
                label="字典类型"
                align="center"
              />
              <el-table-column
                prop="remark"
                label="描述"
                align="center"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="操作"
                align="center"
              >
                <template slot-scope="{row}">
                  <el-tooltip content="编辑">
                    <i
                      v-hasPermission="['dict:update']"
                      class="el-icon-edit table-operation"
                      style="color: #87d068;"
                      @click="editDict(row)"
                    />
                  </el-tooltip>
                  <el-tooltip content="字典配置">
                    <i
                      v-hasPermission="['dict:view']"
                      class="el-icon-setting table-operation"
                      style="color: #2db7f5;"
                      @click="viewDictItem(row)"
                    />
                  </el-tooltip>
                  <el-tooltip content="删除">
                    <i
                      v-hasPermission="['dict:delete']"
                      class="el-icon-delete table-operation"
                      style="color: #f50;"
                      @click="deleteDict(row)"
                    />
                  </el-tooltip>
                  <el-link v-has-no-permission="['dict:view','dict:update','dict:delete']" class="no-perm">
                    {{ $t('tips.noPermission') }}
                  </el-link>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="pagination.num"
              :limit.sync="pagination.size"
              @pagination="pageChange"
            />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="10">
        <dict-edit ref="dictEdit" @success="editSuccess" />
      </el-col>
    </el-row>

    <dict-item
      ref="dictItem"
      :item-visible="itemVisible.isVisible"
      @drawer-close="dictItemClose"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import DictFilter from './components/DictFilter'
import DictEdit from './components/DictEdit'
import DictItem from './components/DictItem'

export default {
  name: 'Index',
  components: { Pagination, DictFilter, DictEdit, DictItem },
  data() {
    return {
      queryParam: {},
      loading: false,
      list: [],
      total: 0,
      pagination: {
        size: 10,
        num: 1
      },
      itemVisible: {
        isVisible: false
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      const params = {
        size: this.pagination.size,
        current: this.pagination.num,
        ...this.queryParam
      }
      this.loading = true
      this.$get('/system/dict', {
        ...params
      }).then((r) => {
        const data = r.data.data
        this.total = data.total
        this.list = data.records
        this.loading = false
      })
    },
    search(queryParam) {
      this.queryParam = queryParam
      this.getList()
    },
    pageChange() {
      this.getList()
    },
    addDict() {
      this.$refs.dictEdit.reset()
    },
    editDict(row) {
      this.$refs.dictEdit.setDict(row)
    },
    deleteDict(row) {
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        this.$delete(`/system/dict/${row.id}`).then(res => {
          this.$message({
            message: this.$t('tips.deleteSuccess'),
            type: 'success'
          })
          this.getList()
        })
      }).catch(() => {

      })
    },
    editSuccess() {
      this.getList()
    },
    // 字典配置
    viewDictItem(row) {
      this.$refs.dictItem.getData(row)
      this.itemVisible.isVisible = true
    },
    dictItemClose() {
      this.itemVisible.isVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .dict-wrap{
    margin: 10px;
    .app-container {
      margin: 0 0 10px 0;
    }
  }
</style>
